import {useCanvasByContext} from "@/utils/canvasHook";
import './index.less'
import Item from "@/views/dataScreen/components/Item";
import InputColor from "@/views/dataScreen/InputColor";
const EditCanvas = () => {
    const canvas: any = useCanvasByContext();
    const style = canvas.getCanvas().style;

    const handleStyleChange = (e: any, {name, value}:any) => {
        console.log(name,value)
        canvas.updateCanvasStyle({[name]: value});
    };
    return (
        <div className={'edit-canvas-main'}>
            <div className={'title'}>画布属性</div>

            <Item label="画布宽度 (px): ">
                <input
                    type="number"
                    className={'itemRight'}
                    value={style.width}
                    onChange={(e:any) => {
                        handleStyleChange(e, {name: "width", value: e.target.value - 0});
                    }}
                />
            </Item>

            <Item label="画布高度 (px): ">
                <input
                    type="number"
                    className={'itemRight'}
                    value={style.height}
                    onChange={(e:any) => {
                        handleStyleChange(e, {name: "height", value: e.target.value - 0});
                    }}
                />
            </Item>

            <Item label="背景颜色: ">
                <InputColor
                    className={'itemRight'}
                    color={style.backgroundColor}
                    onChangeComplete={(e:any) => {
                        handleStyleChange(e, {
                            name: "backgroundColor",
                            value: `rgba(${Object.values(e.rgb).join(",")})`,
                        });
                    }}
                />
            </Item>

            <Item label="背景图片: ">
                <input
                    type="text"
                    className={'itemRight'}
                    value={style.backgroundImage}
                    onChange={(e) => {
                        handleStyleChange(e, {
                            name: "backgroundImage",
                            value: e.target.value,
                        });
                    }}
                />
            </Item>
        </div>
    )
}
export default EditCanvas
